<template>
  <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
    <template #title>
      <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
      <span>{{ menu.privName }}</span>
    </template>
    <menu-item v-for="subMenu in menu.children" :key="subMenu.id" :menu="subMenu" />
  </el-sub-menu>
  <el-menu-item v-else :index="menu.privUrl" :route="{ path: menu.privUrl }">
    <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
    <span>{{ menu.privName }}</span>
  </el-menu-item>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { Folder, Document } from '@element-plus/icons-vue';
import type { Permission } from '@/types/rs/Permission';

defineProps<{
  menu: Permission;
}>();
</script>